<template>
    <div class="homepage">
        <router-view></router-view>  
        <div class="header-bg"> 
            <div class="search_wrapper">
                <div class="myjdheader">
                    <div class="header">
                        <div class="header-bar">
                            <div class="header-left">
                                <router-link to="/classification"><span></span></router-link>
                            </div>
                            <div class="header-center"></div>
                            <div class="header-right">
                                <router-link to="/"><span>登录</span></router-link>
                            </div>
                        </div>
                    </div>
                    <div class="">
                        <form action="/search" class="search-form">
                            <div class="search-box">
                                <i class="first">
                                    
                                </i>
                                <i class="second"></i>
                                <div class="search-input">
                                    <input type="text" placeholder="零食" class="theinput">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <mt-swipe :auto="4000" class="swipe">
            <mt-swipe-item><img src="../../assets/images/lunbotu1.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/images/lunbotu2.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/images/lunbotu3.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/images/lunbotu4.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/images/lunbotu5.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/images/lunbotu6.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/images/lunbotu7.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/images/lunbotu8.jpg" alt=""></mt-swipe-item>
        </mt-swipe>

        <div class="lists">
            <ul>
                <li v-for="(v,i) in msg">
                    <router-link to="/supermarket">
                        <img :src="v.imgsrc"/>
                        <p>{{v.info}}</p>
                    </router-link>
                </li>
            </ul>
        </div>

        <div class="seckill">
            <div class="seckill-title">
                <router-link to="/">
                    <div class="sktitl">京东秒杀</div>
                    <div class="seckill-time">
                        <div class="mytime">14点场</div>
                        <div class="sk_time time">
                            <!-- <div class="sk_h"></div>
                            <div class="sk_separator">:</div>
                            <div class="sk_m"></div>
                            <div class="sk_separator">:</div>
                            <div class="sk_s"></div> -->
                            {{time}}
                        </div>
                    </div>
                    <div class="seckill-right">
                        更多秒杀
                        <i></i>
                    </div>
                </router-link>
            </div>

            <div class="seckill-main">
                <ul>
                    <li v-for="(v,i) in sklists">
                        <router-link to="/">
                            <img :src="v.imgs" />
                            <p class="price">{{v.price}}</p>
                            <p class="originalprice">{{v.originalprice}}</p>
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>

        <div class="homepage-title">
            <img src="../../assets/images/dongjiaxiaoyuan.jpg" alt="">
        </div>
        
        <div class="dongjiaxy">
            <div class="xy_first">
                <div v-for="(v,i) in xyfitst">
                    <span>{{v.title}}</span>
                    <p>{{v.describe}}</p>
                    <img :src="v.picture1" />   
                    <img :src="v.picture2" />       
                </div>
            </div>
            <div class="xy_second">
                <div v-for="(v,i) in xysecond">
                    <span>{{v.title}}</span>
                    <p>{{v.describe}}</p>
                    <img :src="v.picture" /> 
                </div>
            </div>
        </div>

        <div class="homepage-title">
            <img src="../../assets/images/everydayshoppingtitle.jpg" alt="">
        </div>

        <div class="everydayshopping">
            <div v-for="(v,i) in everyday">
                <router-link to="/live">
                    <span>{{v.etitle}}</span>
                    <p>{{v.edescribe}}</p>
                    <img :src="v.epicture" />
                </router-link> 
            </div>
        </div>

        <div class="homepage-title">
            <img src="../../assets/images/recommend.png" alt="">
        </div> 

        <div class="recommend">
            <div v-for="(v,i) in recommend">
                <router-link to="/good">
                    <img :src="v.rpicture" />
                    <span class="rdescribe">{{v.rdescribe}}</span>
                    <p>
                        <span class="rprice">{{v.rprice}}{{v.t1}}</span>
                        <span class="rspan" v-if="v.rspan=='闪购'||v.rspan=='满减'||v.rspan=='新品'">{{v.rspan}}</span>
                        <span class="similar">{{v.similar}}</span>
                    </p>
                </router-link> 
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        data () {
            return {
                msg:{},
                sklists:{},
                xyfitst:{},
                xysecond:{},
                everyday:{},
                recommend:{},
                isshow:false,
                time : '',
                flag : false,
                endTime:'2021-08-29 9:51:00'
            }
        },
        created(){
                this.countdown()
            },
        mounted(){
            this.startInter()
            this.$http.get('./data/homepage.json')
            .then((respone)=>{
                console.log(respone.data);
                this.msg=respone.data.msg;
                this.sklists=respone.data.sklists;
                this.xyfitst=respone.data.xyfitst;
                this.xysecond=respone.data.xysecond;
                this.everyday=respone.data.everyday;
                this.recommend=respone.data.recommend;
            })
            .catch(function(error){
                console.log(error);
            })
            .then(function(){

            })   
        },
        methods: {
      startInter(){
   let time = setInterval(()=>{
        if(this.flag == true){
          clearInterval(time)
        }
        this.timeDown()
      },500)
      },
       timeDown () {
        const endTime = new Date(this.endTime)
        const nowTime = new Date();
        let leftTime = parseInt((endTime.getTime()-nowTime.getTime())/1000)
        let d = parseInt(leftTime/(24*60*60))
        let h = this.formate(parseInt(leftTime/(60*60)%24))
        let m = this.formate(parseInt(leftTime/60%60))
        let s = this.formate(parseInt(leftTime%60))
        if(leftTime <= 0){
          this.flag = true
          this.$emit('time-end')
        }
        this.time = `${d}天${h}小时${m}分${s}秒`     // 需要修改时间样式的话 ，比如需要什么30分钟倒计时，就只保留分和秒
      },
      formate (time) {
        if(time>=10){
          return time
        }else{
          return `0${time}`
        }
      },
     
   countdown () {
    // 定义结束时间戳
    const end = Date.parse(new Date('2019-8-12 10:10:10'))
    // 定义当前时间戳
    const now = Date.parse(new Date())
    // 做判断当倒计时结束时都为0
    if (now >= end) {
     this.day = 0
     this.hr = 0
     this.min = 0
     this.sec = 0
     return
    }
    // 用结束时间减去当前时间获得倒计时时间戳
    const msec = end - now
    let day = parseInt(msec / 1000 / 60 / 60 / 24) //算出天数
    let hr = parseInt(msec / 1000 / 60 / 60 % 24)//算出小时数
    let min = parseInt(msec / 1000 / 60 % 60)//算出分钟数
    let sec = parseInt(msec / 1000 % 60)//算出秒数
    //给数据赋值
    this.day = day
    this.hr = hr > 9 ? hr : '0' + hr
    this.min = min > 9 ? min : '0' + min
    this.sec = sec > 9 ? sec : '0' + sec
    //定义this指向
    const that = this
    // 使用定时器 然后使用递归 让每一次函数能调用自己达到倒计时效果
    setTimeout(function () {
     that.countdown()
    }, 1000)
   }
  }
    }
</script>  

<style>
    .homepage .mint-swipe-items-wrap{
        padding-bottom: 39.5714%;
        height: 0px;
        border-radius: 3%;
    }
     .homepage .swipe img{
        width: 100%;
        border-radius: 3%;
    }
</style>
<style scoped>
    .homepage{
        background: #f0f0f0;
    }
    .header-bg{
        background-image: linear-gradient(0deg,#f1503b,#c82519 50%);
        margin-top: 0px;
        height: 7.25rem;
        width: 100%;
        border-bottom-left-radius: 10%;
        border-bottom-right-radius: 10%;
        z-index: 10;
    }
    .search_wrapper{
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        z-index: 300;
    }
    .wrapper{
        display: block;
        background: transparent;
        position: relative
    }
    .myjdheader{
        background: transparent;
        position: relative;
        z-index: 969;
        width: 100%;
        margin: 0 auto;
    }
    .header-container{
        position: relative;
    }
    .search_wrapper .header{
        margin: 0;
        padding: 0;
        width: 100%;
        min-height: 44px;
        font-family: PingHei,Lucida Grande,Lucida Sans Unicode,STHeiti,Helvetica,Arial,Verdana,"sans-serif";
        font-size: 16px;
        text-decoration: none;
        color: #252525;
        background: transparent;
        border-bottom: none;
        background-color: #c82519;
    }
    .theheader{
        min-height: 44px;
    }
    .header-bar{
        background: transparent;
        border-bottom: none;
        position: relative;
        min-height: 44px;
    }
    .header-left{
        position: absolute;
        z-index: 120;
        width: 40px;
        height: 44px;;
    }
    .header-left span{
        background: url() no-repeat;
        background-size: 100% 100%;
        margin: 14px 0 0 15px;
        width: 20px;
        height: 18px;
        display: block;
    }
    .header-center{
        margin: 0 70px;
        height: 44px;
        font-size: 16px;
        text-align: center;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .header-right{
        z-index: 120;
        overflow: hidden;
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        height: 44px;
        text-align: left;
    }
    .header-right a{
        display: inline-block;
        margin: 10px 0;
        color: #fff;
        font-size: 14px;
        text-decoration: none;
        font-family: PingHei,Lucida Grande,Lucida Sans Unicode,STHeiti,Helvetica,Arial,Verdana,"sans-serif";
    }
    .search-form{
        margin: 0px 20px 0px 50px;
        display: block;
        overflow: hidden;
        padding: 0px;
        height: 44px;
    }
    .search-box{
        margin-right: 32px;
        margin-top: 7px;
        height: 30px;
        position: relative;
        background: #fff;
        border-radius: 50%;
    }
    .search-box .first{
        display: block;
        width: 20px;
        height: 15px;
        background: url() no-repeat;
        background-size: 20px 15px;
        margin: 8px 8px 0 15px;
        position: relative;
        z-index: 1;
        float: left;
    }
    .search-box .second{
        margin-left: 5px;
        display: block;
        height: 15px;
        background: url(https://st.360buyimg.com/so/images/search/jd-sprites.png?__inline=) no-repeat;
        background-size: 200px;
        background-position: -80px 0;
        margin: 8px 0px 0px 15px;
        position: relative;
        z-index: 1;
        float: left;
    }
    .search-input{
        display: inline-block;
        width: 100%;
        border: none;
        border-radius: 15px;
        height: 30px;
        overflow: hidden;
        background: #f7f7f7;
        font-size: 12px;
        line-height: 30px;
        position: absolute;
        top: 0;
        left: 0;
        padding-right: 10px;
        box-sizing: border-box;
        padding-left: 68px;
    }
    .theinput{
        border: 0;
        background: 0 0;
        font-size: 12px;
        color: #232326;
        padding-left: 5px;
        box-sizing: border-box;
        /* -webkit-box-flex: 1; */
        height: auto;
        margin: 0 0 0 5px;
        vertical-align: middle;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        line-height: 16px;
        outline: none;
    }
    .header{
        background: #c82519;
        height: 44px;
        position: fixed;
    }
   
    .homepage .swipe{
        z-index: 200;
        width: 90%;
        margin: -70px 20px 0px;
    }
    .headernav{
    position: relative;
    
    }
    .homepage .lists{
        margin-top: 10px;
    }
    .homepage .lists ul{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }
    .homepage .lists li{
        width: 20%;
        text-align: center;
        margin-bottom: 10px;
    }
    .homepage .lists li p{
        font-size: 12px;
        color: black;
        text-decoration: none;
    }
    .homepage .lists li img{
        width: 50%;  
    }
    .homepage .lists li a{
        text-decoration: none;
    }
    .homepage .seckill{
        margin: 10px 10px;
        background: #fff;
    }
    .homepage .seckill-title{
        background: url() no-repeat;
        background-size: contain;
        height: 1.7rem;
        line-height: 1.7rem;
        vertical-align: middle;
        margin-bottom: 2px;
    }
    .homepage .sktitl{
        float: left;
        display: inline-block;
        height: 1.35rem;
        margin-top: .4rem;
        margin-right: 10px;
        margin-left: 10px;
        font-family: PingFangSC-Semibold;
        font-size: 14px;
        color: #333;
        letter-spacing: 0;
        line-height: 1.2;
    }
    .homepage .seckill-time{
        display: inline-block;
        border: 1px solid #f2270c;
        border-radius: .4rem;
        /* height: .9rem; */
        line-height: .9rem;
        font-size: 0;
        float: left;
        margin-top: .4rem;
        vertical-align: middle;
    }
    .homepage .seckill-time{
        background-color: #fff;
        /* background-image: linear-gradient(90deg,#f10001,#fe4e18); */
        border-radius: .4rem;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #fff;
        letter-spacing: 0;
        /* padding-right: .25rem; */
        /* padding-left: .25rem; */
        float: left;
        position: relative;
        left: -1px;
        margin-right: .2rem;
        line-height: 1.4;
    }
    .homepage .mytime{
        /* width: 50px; */
        float: left;
        /* margin-right: 5px; */
        background-image: linear-gradient(90deg,#f10001,#fe4e18);
        border-radius: .4rem;
    }
    .homepage .sk_time{
        margin-right: .2rem;
        height: 100%;
        float: right;
        background-color: #fff;
        color: red;
    }
    .homepage .seckill-right{
        float: right;
        font-size: 12px;;
    }
    .homepage .seckill-right i{
        display: inline-block;
        width: 12px;
        height: 12px;
        background: url(//wq.360buyimg.com/wxsq_project/portal/m_jd_index/images/arrow_rt_2ccb8cd5.png) no-repeat;
        background-size: cover;
        margin-right: 10px;
    }
    .homepage .seckill a{
        color: #333;
    }
    .homepage .seckill .seckill-right{
        color: #f23030;
    }
    .homepage .seckill-main{
        overflow: hidden;
    }
    .homepage .seckill-main ul{
        position: relative;
        overflow: hidden;
        /* background-color: #fff; */
        padding-left: 5px;
        width: 100%;
        overflow-x: auto;
        white-space:nowrap;
    }
    .homepage .seckill-main ul::-webkit-scrollbar{
        display: none;
    }
    .homepage .seckill-main ul li{
        display: inline-block;
        width: 30%;
        margin: 0px 25px;
    }
    .homepage .seckill-main ul li img{
        width: 80%;
    }
    .homepage .homepage-title{
        margin-top: 10px;
    }
    .homepage .homepage-title img{
        width: 100%;
    }
    .homepage .seckill-main a{
        text-decoration: none;
    }
    .homepage .seckill-main .price{
        color: #f2270c;
        font-family: JDZhengHT-EN-Regular;
        font-size: 18px;
    }
    .homepage .seckill-main .originalprice{
        text-decoration: line-through;
        color: #999;;
    }
    .homepage .dongjiaxy{
        background: #fff;
        margin: 0px 10px 10px 10px;
        /* height: 500px; */
        padding: 10px 10px;
        /* height: 250px; */
        overflow: hidden;
    }
    .homepage .xy_first{
        overflow: hidden;
        background: #fff;
        text-align: left;
        font-size:20px;
        line-height:10px;
        font-family: PingFangSC-Light,PingFang-Medium,PingFangSC-Regular,Helvetica,Droid Sans,Arial,sans-serif;
    }
    .homepage .xy_first{
        overflow: hidden;
    }
    .homepage .xy_first div{
        float: left;
        width: 50%;
    }
    .homepage .xy_second div{
        float: left;
        width: 25%;
        margin-top: 10px;
        /* border-right: 1px solid #f5f5f5; */
    }
    .homepage .dongjiaxy img{
        width: 44%;
        margin-right: 5px;
    }
    .homepage .dongjiaxy span{
        font-size: 18px;
        font-weight: 700;
        background: -webkit-linear-gradient(left,#45CAFF,#1471FB);
        background: linear-gradient(90deg, #45CAFF,#1471FB);
        -webkit-background-clip: text;
        color: transparent;
    }
    .homepage .dongjiaxy .xy_second span{
        color: rgb(0, 0, 0);
        font-weight: 600;
        font-size: 16px;
    }
    .homepage .dongjiaxy p{
        color: #666771;
        overflow: hidden;
        font-size: 15px;
        line-height: 40px;
    }
    .homepage .dongjiaxy .left-font{
        text-align: left;
    }
    .homepage .xy_second img{
        width: 70%;
    }
    .homepage .everydayshopping{
        height: 260px;
        /* margin: 0px 10px; */
        width: 100%;
    }
    .homepage .everydayshopping div{
        background-color: #fff;
        width: 25%;
        float: left;
        height: 50%;
        /* border-right: 1px solid #f5f5f5; */
    }
    .homepage .everydayshopping div img{
        width: 80%;
    }
    .homepage .everydayshopping div a span{
        background: -webkit-linear-gradient(left,#FF2A2A,#F139D2);
        background: linear-gradient(90deg, #FF2A2A,#F139D2);
        -webkit-background-clip: text;
        color: transparent;
        font-weight: 700;
    }
    .homepage .everydayshopping div a{
        text-decoration: none;
        font-size: 15px;
    }
    .homepage .everydayshopping div a p{
        color: #222222;
    }
    .homepage .recommend{
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        text-align: left;
    }
    .homepage .recommend div{
        width: 47%;
        margin: 0px 5px;
        margin-bottom: 10px;
        background-color: #fff;
    }
    .homepage .recommend div img{
        width: 100%;
    }
    .homepage .recommend a{
        text-decoration: none;
        overflow: hidden;
        display: inline-block;
    }
    .homepage .recommend p{
        position: relative;
        margin-bottom: 20px;
    }
    .homepage .recommend .rdescribe{
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-all;
        color: #232326;
        margin-top: 5px;
        line-height: 16px;
        margin-bottom: 3px;
        padding: 0 4px;
    }
    .homepage .recommend .rprice{
        color: #f23030;
        display: inline-block;
        padding: 0 5px 0 4px;
        position: relative;
        top: 1px;
        height: 25px;
        line-height: 25px;
        font-family: JDZhengHT-EN-Regular;
    }
    .homepage .recommend .rspan{
        border: 1px solid #e4393c;
        color: #e4393c;
        font-size: 12px;
        padding: 0 3px;
        margin-right: 5px;
        line-height: 14px;
        height: 14px;
    }
    .homepage .recommend .similar{
        display: block;
        position: absolute;
        top: 0px;
        right: 8px;
        text-align: center;
        color: #686868;
        font-size: 12px;
        width: 49px;
        height: 24px;
        line-height: 25px;
    }
    .homepage .recommend .similar::after{
        content: "";
        width: 200%;
        height: 200%;
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid #bfbfbf;
        border-radius: 4px;
        transform: scale(.5);
        transform-origin: top left;
    }
</style>